import React, { Component } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Title } from 'bee/components/MakePlan';
import { colors } from 'bee/themes';
import DetailInfoItem from 'bee/components/MyDetailInfo';
import { LongCuttingLine } from 'bee/components/Line';
import { px2dp } from 'bee/utils/px2dp';

export default class MyDetailInfo extends Component<props> {
  constructor() {
    super();

    this.state = {
      // 增员人／编码
      referrerCode: '647839998767',
      // 业务组／编码
      teamCode: '7884899490',
      //   业务部／编码
      departmentCode: '8327498145082348',
      //   业务区／编码
      areaCode: '3847092375094',
      //   证 件 号 码
      idNo: '8478920740294',
      //   出 生 日 期
      birthday: '1992-10-06',
      //   民 族
      nationality: '汉族',
      // 政 治 面 貌
      politicStatus: '群众',
      // 文 化 程 度
      degreeOfEducation: '本科',
      // 薪资开户行
      bankOfDeposit: 'China Bank',
      //   薪 资 卡 号
      bankCard: '328470297247',
      //   详 细 地 址
      detailedAddress: '北京市中关村海淀大街22号',
      // 手 机 号 码
      phone: '13981187076',
    };
  }

  render() {
    const { params } = this.props.navigation.state;
    return (
      <ScrollView>
        <View style={styles.outerBox}>
          <Title title="级别信息" />
          <DetailInfoItem
            title="增员人／编码:"
            content={this.state.referrerCode}
          />
          <LongCuttingLine />

          <DetailInfoItem title="业务组／编码:" content={this.state.teamCode} />
          <LongCuttingLine />

          <DetailInfoItem
            title="业务部／编码:"
            content={this.state.departmentCode}
          />
          <LongCuttingLine />

          <DetailInfoItem title="业务区／编码:" content={this.state.areaCode} />
        </View>

        <View style={styles.outerBox}>
          <Title title="我的基本信息" />
          <DetailInfoItem title="营销员编码:" content={params.code} />
          <LongCuttingLine />

          <DetailInfoItem
            title="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:"
            content={params.username}
          />
          <LongCuttingLine />
          <DetailInfoItem title="证 件 号 码:" content={this.state.idNo} />
          <LongCuttingLine />
          <DetailInfoItem title="出 生 日 期:" content={this.state.birthday} />
          <LongCuttingLine />
          <DetailInfoItem
            title="民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族:"
            content={this.state.nationality}
          />
          <LongCuttingLine />
          <DetailInfoItem
            title="政 治 面 貌:"
            content={this.state.politicStatus}
          />
          <LongCuttingLine />
          <DetailInfoItem
            title="文 化 程 度:"
            content={this.state.degreeOfEducation}
          />
          <LongCuttingLine />
          <DetailInfoItem
            title="薪资开户行:"
            content={this.state.bankOfDeposit}
          />
          <LongCuttingLine />

          <DetailInfoItem title="薪 资 卡 号:" content={this.state.bankCard} />
          <LongCuttingLine />
          <DetailInfoItem
            title="详 细 地 址:"
            content={this.state.detailedAddress}
          />
          <LongCuttingLine />
          <DetailInfoItem title="手 机 号 码:" content={this.state.phone} />
          <LongCuttingLine />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  outerBox: {
    marginBottom: px2dp(30),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
});
